import { Component, Input } from '@angular/core';
import * as $ from 'jquery'
import { PhotoLibrary } from '@ionic-native/photo-library';
import { Toast } from '@ionic-native/toast';


declare var Canvas:any;
declare var html2canvas:any;

/**   
 * Generated class for the PalletComponent component.
 *ss
 * See https://angular.io/api/core/Component for more info on Angular
 * Components.
 */   
@Component({ 
  selector: 'pallet',  
  templateUrl: 'pallet.html'
})    
export class PalletComponent {
  
  private canvas: any   
  private control: any     
  private saveBtn: any    
  private colorDiv: any
  private brushDiv: any 
  private can: any

  constructor(private photoLibrary: PhotoLibrary,private toast: Toast) {}
  @Input() bgPicUrl :string

  ngOnInit(){
    $('.save-eare .float-bg')[0].style.backgroundImage = 'url(assets/pictures/'+this.bgPicUrl+')'
    this.canvas = $('#myCanv')[0]   
    this.control = document.getElementsByClassName("tool")[0]
    this.brushDiv = $('.pen')[0]
    this.colorDiv = $('.color-board')[0]
    this.can = new Canvas(  this.canvas,this.colorDiv,this.brushDiv,this.control) 
    
  } 

  onSave(){
      this.photoLibrary.requestAuthorization().then(() => {
        this.photoLibrary.getLibrary().subscribe({
          next: () => {this.photoLibrary.saveImage(this.can.saveSrc,"caihui")},
          error: err => { alert(err) },
          complete: () => { this.toast.show('Saved to the album','3000','bottom').subscribe(
            tast => {
              console.log('toast!!')
            }
          ) }
        })
      }).catch(err => console.log('permissions weren\'t granted'));
  }

  onStatePre(){
    if(this.can.preDrawAry.length<=1){
      this.toast.show('no last step! ','1000','center').subscribe(
        tast => {
          console.log('toast!!')
        }
      )
    }
  }

  onStateNext(){
    if(this.can.nextDrawAry.length==0){
      this.toast.show('no next step! ','1000','center').subscribe(
        tast => {
          console.log('toast!!')
        }
      )
    }
  }
}
